<!DOCTYPE html>
<html lang="zh">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>{$config.admin_login_title}</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <link rel="stylesheet" type="text/css" href="/static/assets/admin/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="/static/assets/admin/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/assets/admin/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/static/assets/admin/css/style.min.css">
    <style>
        .signin-form .has-feedback {
    position: relative;
}
.signin-form .has-feedback .form-control {
    padding-left: 36px;
}
.signin-form .has-feedback .mdi {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    width: 36px;
    height: 36px;
    line-height: 36px;
    z-index: 4;
    color: #dcdcdc;
    display: block;
    text-align: center;
    pointer-events: none;
}
.signin-form .has-feedback.row .mdi {
    left: 15px;
}
</style>
</head>

<body class="center-vh" style="background-image: url({$config.admin_login_background_image?$config.admin_login_background_image:'/static/assets/admin/images/login-bg-2.jpg'}); background-size: cover;">
    <div class="card card-shadowed p-5 mb-0 mr-2 ml-2">
        <div class="text-center mb-3">
            <a href="javascript:;">
                {if $config.admin_login_logo_type==0}
                <img src="{$config.admin_logo}"/>
                {/if}
                {if $config.admin_login_logo_type==1}
                    <font style="font-size:1.2rem;">{$config.admin_login_logo_text}</font>
                {/if}
            </a>
        </div>
        <form method="post" class="signin-form needs-validation" novalidate>
            <div class="mb-3 has-feedback">
                <span class="mdi mdi-account" aria-hidden="true"></span>
                <input type="text" class="form-control" id="username" name="username" placeholder="用户名" required>
            </div>
            <div class="mb-3 has-feedback">
                <span class="mdi mdi-lock" aria-hidden="true"></span>
                <input type="password" class="form-control" id="password" name="password" placeholder="密码" required>
            </div>
            <div class="mb-3 has-feedback row" id="code_box">
                <div class="col-7">
                    <span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>
                    <input type="text" name="code" class="form-control" placeholder="验证码">
                </div>
                <div class="col-5 text-right">
                    <img src="{:url('Index/Code')}" onclick="LoadCode()" class="pull-right" id="code" title="点击刷新">
                </div>
            </div>
            <div class="mb-3 d-grid">
                <button class="btn btn-primary" type="submit">立即登录</button>
            </div>
        </form>
        <p class="text-center text-muted mb-0">{$config.admin_login_logo_copyright}</p>
    </div>
    <script type="text/javascript" src="/static/assets/admin/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/assets/admin/js/popper.min.js"></script>
    <script type="text/javascript" src="/static/assets/admin/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/assets/admin/js/lyear-loading.js"></script>
    <script type="text/javascript" src="/static/assets/admin/js/bootstrap-notify.min.js"></script>
    <script type="text/javascript">
    var loader;
    $(document).ajaxStart(function() {
        $("button:submit").html('登录中...').attr("disabled", true);
        loader = $('button:submit').lyearloading({
            opacity: 0.2,
            spinnerSize: 'nm'
        });
    }).ajaxStop(function() {
        loader.destroy();
        $("button:submit").html('立即登录').attr("disabled", false);
    });
    $('.signin-form').on('submit', function(event) {
        if ($(this)[0].checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
            $(this).addClass('was-validated');
            return false;
        }

        var $data = $(this).serialize();
        $.post("{:url('Index/Login')}", $data, function(res) {
            if (res.hasOwnProperty('code') && res.code == 1) {
                $.notify({
                    message: '登录成功，页面即将跳转~',
                }, {
                    type: 'success',
                    placement: {
                        from: 'top',
                        align: 'center'
                    },
                    z_index: 10800,
                    delay: 1500,
                    animate: {
                        enter: 'animate__animated animate__fadeInUp',
                        exit: 'animate__animated animate__fadeOutDown'
                    }
                });
                setTimeout(function() {
                    location.href = "{:url('Index/Index')}";
                }, 1500);
            } else {
                $.notify({
                    message: '登录失败' + (res.hasOwnProperty('code') ? ':' + res.msg : ''),
                }, {
                    type: 'danger',
                    placement: {
                        from: 'top',
                        align: 'center'
                    },
                    z_index: 10800,
                    delay: 1500,
                    animate: {
                        enter: 'animate__animated animate__shakeX',
                        exit: 'animate__animated animate__fadeOutDown'
                    }
                });
                $("#code").click();
            }
        }).fail(function() {
            $.notify({
                message: '服务器错误',
            }, {
                type: 'danger',
                placement: {
                    from: 'top',
                    align: 'center'
                },
                z_index: 10800,
                delay: 1500,
                animate: {
                    enter: 'animate__animated animate__shakeX',
                    exit: 'animate__animated animate__fadeOutDown'
                }
            });
        });

        return false;
    });

    function LoadCode() {
        $("#code").attr("src", "{:url('Index/Code')}?t=" + Math.random(0, 100));
    }
    </script>
</body>

</html>